<template>
  <div class="container">
    <!-- form表单 -->
    <ShouSuo></ShouSuo>

    <!-- 列表区域 -->
    <p class="bgc"><i class="el-icon-info"></i> 数据一共 {{total}} 条</p>
    <el-card>
      <el-table :header-cell-style="{
    'background-color': '#fafafa',
    'border-bottom': '3px #E8E8E8 solid'
}" :data="tableData">
        <af-table-column label="试题编号" prop="number" width="160px" fixed></af-table-column>
        <af-table-column label="学科" prop="subject" width="60px"></af-table-column>
        <af-table-column label="目录" prop="catalog">
        </af-table-column>
        <af-table-column label="题型" prop="questionType" width="80px">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType==='1'">单选</span>
            <span v-if="scope.row.questionType==='2'">多选</span>
            <span v-if="scope.row.questionType==='3'">简答</span>
          </template>
        </af-table-column>
        <af-table-column label="题干" prop="question" width="260px">
          <template slot-scope="scope">
            <span v-html="scope.row.question"></span>
          </template>
        </af-table-column>
        <af-table-column label="录入时间" prop="addDate" :formatter="setDate"></af-table-column>
        <af-table-column label="难度" prop="difficulty" width="80px">
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty === '1'">简单</span>
            <span v-if="scope.row.difficulty === '2'">普通</span>
            <span v-if="scope.row.difficulty === '3'">困难</span>
          </template>
        </af-table-column>
        <af-table-column label="录入人" prop="creator"></af-table-column>
        <af-table-column label="操作" fixed="right">
          <template slot-scope="scope">
            <el-row>
              <el-button class="preview" size="mini" title="预览" circle @click="previewBtn(scope.row)">
                <i class="el-icon-view"></i>
              </el-button>
              <el-button class="modify" size="mini" title="修改" circle @click="modifyBtn(scope.row)">
                <i class="el-icon-edit"></i>
              </el-button>
              <el-button class="delete" size="mini" title="删除" circle @click="deleteBtn(scope.row)">
                <i class="el-icon-delete"></i>
              </el-button>
              <el-button class="add" size="mini" title="加入精选" circle @click="addBtn(scope.row)">
                <i class="el-icon-check"></i>
              </el-button>
            </el-row>
          </template>
        </af-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination align="right" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="ruleForm.page" :page-sizes="[5, 10, 20, 50]" :page-size="ruleForm.pagesize" layout="prev, pager, next, sizes, jumper" :total="total">
      </el-pagination>
    </el-card>

    <!-- 题目预览弹层 -->
    <el-dialog title="题目预览" :visible="showDialog" @close="CloseBtn">
      <!-- 第一行 -->
      <el-row>
        <el-col :span="6" style="marginBottom:15px">
          <span>【题型】</span>：
          <span v-if="row.questionType === '1'">单选</span>
          <span v-if="row.questionType === '2'">多选</span>
          <span v-if="row.questionType === '3'">简答</span>
        </el-col>
        <el-col :span="6" style="marginBottom:15px"> <span>【编号】</span>：{{ row.catalogID }}</el-col>
        <el-col :span="6" style="marginBottom:15px"> <span>【难度】</span>：
          <span v-if="row.difficulty === '1'">简单</span>
          <span v-if="row.difficulty === '2'">普通</span>
          <span v-if="row.difficulty === '3'">困难</span>
        </el-col>
        <el-col :span="6" style="marginBottom:15px"> <span>【标签】</span>：{{row.tags}}</el-col>
        <el-col :span="6" style="marginBottom:15px"> <span>【学科】</span>：{{ row.subjectName }}</el-col>
        <el-col :span="6" style="marginBottom:15px"> <span>【目录】</span>：{{ row.directoryName }}</el-col>
        <el-col :span="6" style="marginBottom:15px"> <span>【方向】</span>：{{row.direction}}</el-col>
      </el-row>
      <hr>
      <!-- 第二行 -->
      <el-row>
        <p>【题干】：</p>
        <p class="question" v-html="row.question"></p>
        <p> 选项：</p>
        <p>
          <span v-if="row.questionType === '1'">
            <span> 单选题 选项 ：(以下选项为正确答案)</span>
            <el-col :span="24">
              <el-radio class="select" v-for="item in row.options" :key="item.id" v-model="item.isRight" :label="1">{{ item.title }}</el-radio>
            </el-col>
          </span>
          <span v-if="row.questionType === '2'">
            <span>多选题 选项 ：(以下选项为正确答案)</span>
            <!-- item.isRight=1 代表选中 -->
            <el-checkbox class="select" v-for="item in row.options" :key="item.id" v-model="item.isRight" :true-label="1">{{ item.title }}</el-checkbox>
          </span>
          <span v-if="row.questionType === '3'">
            <span> 简答题 选项 ：(以下选项为正确答案)</span>
          </span>
        </p>
      </el-row>
      <hr>
      <!-- 第三行 -->
      <el-row>
        <el-col>
          <span>【参考答案】: </span>
          <el-button type="danger" @click="VideoShow">视频答案预览</el-button>
          <div v-if="showVideo" class="video">
            <video style="width:300px" src="//f.video.weibocdn.com/o0/PcGpGwc3lx07Xs56JtYQ01041202NStH0E010.mp4?label=mp4_1080p&template=1920x1080.25.0&media_id=4788908870008858&tp=8x8A3El:YTkl0eM8&us=0&ori=1&bf=3&ot=h&ps=3lckmu&uid=7aygA8&ab=9298-g4,8224-g0,7397-g1,8143-g0,8013-g0,7598-g0&Expires=1670731150&ssig=%2B6ZBRVxfzD&KID=unistore,video" controls="controls" autoplay></video>
          </div>
        </el-col>
      </el-row>
      <hr>
      <!-- 第四行 -->
      <el-row style="padding:10px 0px">
        <el-col>
          <span>【答案解析】:</span><span v-html="row.answer"></span>
        </el-col>
      </el-row>
      <hr>
      <!-- 第五行 -->
      <el-row style="padding:10px 0px">
        <el-col>
          <span>【题目备注】:</span><span v-html="row.remarks"></span>
        </el-col>
      </el-row>
      <!-- 第六行 -->
      <el-row type="flex" justify="center">
        <el-col :span="4">
          <el-button type="primary" @click="CloseBtn">关闭</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { list, detail, remove, choiceAdd } from '@/api//hmmm/questions.js'
import ShouSuo from '../components/shousuo.vue'
import moment from 'moment'

export default {
  components: {
    ShouSuo
  },
  data() {
    return {
      tableData: [], // 表格数据
      total: 0, // total数据
      // 获取用户列表的参数对象
      ruleForm: {
        page: 1, // 从第几页开始
        pagesize: 5 // 一页多少条数据
      },
      showDialog: false, // 题目预览弹层
      showVideo: false, // 视频
      row: {} // 每一条数据
    }
  },
  created() {
    // 获取表格中的所有数据
    this.list()
  },
  methods: {
    async list() {
      const { data } = await list()
      this.tableData = data.items
      this.total = data.counts
    },
    // 格式化修改
    setDate(row, column) {
      var newdate = row[column.property]
      if (newdate === undefined) {
        return ''
      }
      return moment(newdate).format('YYYY-MM-DD HH:mm:ss')
    },
    // 监听 pagesize 改变的事件
    handleSizeChange(pagesize) {
      console.log(pagesize)
      this.ruleForm.pagesize = pagesize // 重新指定每页数据量
      this.list() // 带着新的分页请求获取数据
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(page) {
      this.ruleForm.page = page // 重新指定当前页
      this.list() // 带着新的分页请求获取数据
    },
    // 预览按钮
    async previewBtn(row) {
      this.showDialog = true
      this.row = row
      const res = await detail({ id: row.id })
      this.row = res.data
    },
    // 关闭弹窗
    CloseBtn() {
      this.showDialog = false
      this.showVideo = false
    },
    // 视频播放
    VideoShow() {
      this.showVideo = true
    },
    // 修改按钮
    modifyBtn(i) {
      this.$router.push(`/questions/new?id=${i.id}`)
    },
    // 删除按钮
    async deleteBtn(row) {
      // console.log('删除')
      try {
        await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
          type: 'warning'
        })
        await remove(row)
        this.list()
        this.$message.success('删除题组成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 加入精选按钮
    async addBtn(row) {
      try {
        await this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
          type: 'info'
        })
        await choiceAdd({ ...row, choiceState: 1 })
        this.list()
        this.$message.success('上传题组成功')
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped>
.container {
  background-color: #fff;
  margin: 10px 8px;
  padding: 5px 10px;
  border-radius: 4px;
}
.bgc {
  height: 40px;
  line-height: 40px;
  font-size: 13px;
  color: #909399;
  background-color: #f4f4f5;
  width: 100%;
  border-radius: 5px;
  padding-left: 20px;
}
/* 表格 */
.el-table {
  margin-bottom: 20px;
}
.el-icon-info {
  color: #909399;
}
/* 预览按钮 */
.preview {
  border: 1px solid #b3d8ff;
  background-color: #ecf5ff;
}
.el-icon-view {
  color: #409eff;
}
/* 修改按钮 */
.modify {
  border: 1px solid #c2e7b0;
  background-color: #f0f9eb;
}
.el-icon-edit {
  color: #67c23a;
}
/* 删除 */
.delete {
  border: 1px solid #fbc4c4;
  background-color: #fef0f0;
}
.el-icon-delete {
  color: #f56c6c;
}
/* 加入精选 */
.add {
  border: 1px solid #f5dab1;
  background-color: #fdf6ec;
}
.el-icon-check {
  color: #e6a23c;
}
/* 问题 */
.question {
  color: #7070ff;
}
/* 选项 */
.select {
  display: block;
  margin: 4px 0px;
}
</style>
